import React, { Fragment } from 'react'
import { View, StyleSheet, Text } from 'react-native'
import { ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import PropTypes from 'prop-types'
import CustomModalAnimatable from 'src/components/modal/CustomModalAnimatable'
import CustomButton from 'src/components/button/CustomButton'
import CustomImage from 'src/components/image/CustomImage'

export default class SwitchRoleModal extends React.PureComponent {
  state = {
    role: 'C'
  }

  roleBtnClick = role => {
    this.setState({
      role
    })
  }

  onConfirm = () => {
    this.props.onConfirm && this.props.onConfirm(this.state.role)
  }

  onModalHideTemp = () => {
    this.props.onModalHide && this.props.onModalHide(this.state.role)
  }

  render () {
    const { role } = this.state
    return (
      <CustomModalAnimatable
        {...this.props}
        onModalHideTemp={this.onModalHideTemp}
      >
        <View style={styles.container}>
          <Text style={styles.titleLabel}>选择身份</Text>
          <View style={styles.btnsWrap}>
            <CustomButton style={styles.btnWrap} params={'B'} onPress={this.roleBtnClick}>
              <CustomImage
                style={styles.roleImg}
                source={require('src/imgC/login/roleB.png')}
              />
              <Text style={styles.roleTxt}>我要招聘</Text>
              {role === 'B' && <CustomImage
                style={styles.checkImg}
                source={require('src/imgC/userinfo/job-nature-select.png')}
              />}
            </CustomButton>
            <CustomButton style={styles.btnWrap} params={'C'} onPress={this.roleBtnClick}>
              <CustomImage
                style={styles.roleImg}
                source={require('src/imgC/login/roleC.png')}
              />
              <Text style={styles.roleTxt}>我要求职</Text>

              {role === 'C' && <CustomImage
                style={styles.checkImg}
                source={require('src/imgC/userinfo/job-nature-select.png')}
              />}
            </CustomButton>
          </View>
          <CustomButton style={styles.confirmBtn} onPress={this.onConfirm}>
            <Text style={styles.confirmText}>{'确定'}</Text>
          </CustomButton>
        </View>
      </CustomModalAnimatable>
    )
  }
}

SwitchRoleModal.propTypes = {
  onCancel: PropTypes.func,
  onConfirm: PropTypes.func,
  onModalHide: PropTypes.func,
  visible: PropTypes.bool
}
const styles = StyleSheet.create({
  container: {
    width: ScaleS(363),
    marginBottom: ScaleS(6),
    backgroundColor: '#FFFFFF',
    borderRadius: ScaleS(12),
    alignSelf: 'center',
    alignItems: 'center'
  },
  titleLabel: {
    color: '#444444',
    marginTop: ScaleS(27),
    fontSize: ScaleT(24),
    lineHeight: ScaleS(33),
    fontWeight: '400'
  },
  btnsWrap: {
    flexDirection: 'row'
  },
  btnWrap: {
    width: ScaleS(152),
    alignItems: 'center'
  },
  roleImg: {
    marginTop: ScaleS(51)
  },
  roleTxt: {
    marginTop: ScaleS(18),
    color: '#444444',
    fontSize: ScaleT(18),
    lineHeight: ScaleS(28),
    fontWeight: '500'
  },
  checkImg: {
    marginTop: ScaleS(21)
  },
  confirmBtn: {
    marginTop: ScaleS(42),
    marginBottom: ScaleS(26),
    width: ScaleS(297),
    height: ScaleS(45),
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#000000',
    borderRadius: ScaleS(10)
  },
  confirmText: {
    color: '#FFFFFF',
    fontSize: ScaleT(15),
    fontWeight: '600'
  }
})
